<template>
    <div>
        <el-dialog :title="seckStatus.isAdd ? '添加秒杀' : '编辑秒杀'" :visible.sync="seckStatus.isShow" center
            :before-close="cancel">
            <el-form :model="seckForm" :rules="rules" ref="seckRef">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="seckForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select @change="changesort(false)" v-model="seckForm.first_cateid" placeholder="请选择活动区域">
                        <el-option v-for="item in sortlist" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select @change="changegoods(false)" v-model="seckForm.second_cateid" placeholder="请选择活动区域">
                        <el-option v-for="item in sortchild" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.goodsid" placeholder="请选择活动区域">
                        <el-option v-for="item in goods" :label="item.goodsname" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { goodslist, seckadd, seckedit, seckinfo } from '../../request/api'
export default {
    props: ['seckStatus'],
    data() {
        return {
            formLabelWidth: '80px',
            seckForm: {
                title: '',//限时秒杀名称
                begintime: '',//开始时间
                endtime: '',//结束时间
                first_cateid: '',//商品一级分类编号
                second_cateid: '',//商品二级分类编号
                goodsid: '',//商品编号
                status: 1,//状态   1正常2禁用

            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: [],
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                ]
            },
            sortchild: [],//二级分类
            goods: []//商品编号
        }
    },
    methods: {
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        reset() {
            this.seckForm = {
                title: '',//限时秒杀名称
                begintime: '',//开始时间
                endtime: '',//结束时间
                first_cateid: '',//商品一级分类编号
                second_cateid: '',//商品二级分类编号
                goodsid: '',//商品编号
                status: 1,//状态   1正常2禁用
            }
            this.value2 =[]
        },
        changesort(n) {
            let index = this.sortlist.findIndex((item) => item.id === this.seckForm.first_cateid)
            this.sortchild = this.sortlist[index].children
            if (!n) {
                this.seckForm.second_cateid = ''
            }
        },
        changegoods() {
            goodslist({ fid: this.seckForm.first_cateid, sid: this.seckForm.second_cateid })
                .then(res => {
                    if (res.code == 200) {
                        this.goods = res.list
                    }
                })
        },
        // 数据回显
        lookup(id) {
            seckinfo({ id })
                .then(res => {
                    if (res.code == 200) {
                        this.seckForm = res.list
                        this.seckForm.id = id
                        this.changesort(true)
                        this.changegoods(true)
                        this.$set(this.value2,0,this.seckForm.begintime)
                        this.$set(this.value2,1,this.seckForm.endtime)
                    }
                })
        },
        confirm() {
            this.$refs.seckRef.validate((val) => {
                if (val) {
                    let date1 = new Date(this.value2[0])
                    let year1 = date1.getFullYear();
                    let month1 = date1.getMonth() + 1;
                    let day1 = date1.getDate();
                    this.seckForm.begintime = year1+"-"+month1+"-"+day1
                    let date2 = new Date(this.value2[1])
                    let year2 = date2.getFullYear();
                    let month2 = date2.getMonth() + 1;
                    let day2 = date2.getDate();
                    this.seckForm.endtime = year2+"-"+month2+"-"+day2
                    if (this.seckStatus.isAdd) {//添加
                        console.log(this.value2);
                        console.log(this.seckForm);
                        seckadd(this.seckForm)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$store.dispatch('seck/GetSeckInfo')
                                    this.cancel()
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {//编辑
                        console.log(this.seckForm);
                        seckedit(this.seckForm)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$store.dispatch('seck/GetSeckInfo')
                                    this.cancel()
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                }
            })
        }

    },
    mounted() {
        this.$store.dispatch('sort/GetSortInfo')
    },
    computed: {
        ...mapGetters({
            sortlist: 'sort/getSort',
        })
    },
    components: {}
}
</script>
<style scoped></style>